<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav mui-bar-transparent">	
			<a class="mui-icon mui-icon-back mui-action-back mui-pull-left"></a>
			<a class="mui-icon mui-icon-list mui-pull-right" id="btnSearch"></a>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<div class="mui-row" style="text-align: center;">
					<h4 v-html="item.Title">食药全通</h4>
				</div>
				
				<div class="mui-row" style="margin-top: 10px;">
					<div  v-for="item in item.Label" style="float: left;margin: 5px;">
						<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined" v-html="item">
						</button>
					</div>
				</div>
				<div class="mui-row" style="padding: 10px;">
					<p style="color: #333;">
						&nbsp;&nbsp;&nbsp;&nbsp;
						<span  v-html="item.Summary"></span>
					</p>
				</div>
			</div>
			<div class="mui-bar mui-bar-tab" style="text-align: center;">
				<button type="button" class="mui-btn mui-btn-primary" v-on:click="openChapter()">开始阅读</button>
			</div>
		</div>
		
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
		<script type="text/javascript" src="../js/app.js" ></script>
		<script type="text/javascript">
			mui.init();
			
			function getDefaultData() {
				return {
					"Id":"20f4544b-1583-4870-b9ad-eb1340f85c2b",
					"Code":"",
					"Title":"药品管理法实施条例",
					"RefClassifyId":"",
					"ClassifyName":"",
					"Summary":"",
					"Label":"",
					"Content":"",
					"DispatchCorp":"",
					"DispatchDate":null,
					"EffectiveDate":null,
					"AttachmentUrl":"",
					"RefParentId":"",
					"ParentFile":"",
					"DataState":null,
					"InvalidDate":null,
					"RefReplaceId":"",
					"ReplaceFile":"",
					
				}
			}

			var vm = new Vue({
				el: '.mui-content',
				data: {
					item:getDefaultData(),
					chapterKeys:[]
				},
				methods: {
					resetData: function() {//重置数据
//						Object.assign(this.$data.item, getDefaultData());
						this.$data.item=getDefaultData(),
						this.$data.chapterKeys=[];
					}
				}
			});
			var webview_detail = null; //详情页webview
			mui.plusReady(function(){
				var self = plus.webview.currentWebview();
				var keyValue = self.keyValue;
				
				/*加载数据*/
				var setting = app.getSetting();
				var ajaxUrl = setting.ServerUrl +"/api/TrainContent/GetEntityKeys?keyValue="+keyValue;
				console.log(ajaxUrl);
				plus.nativeUI.showWaiting("正在读取数据，请稍候...");
				mui.ajax(ajaxUrl,{
					dataType:'json',//服务器返回json格式数据
					type:'get',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/json'},	              
					success:function(result){
						plus.nativeUI.closeWaiting();
						//服务器返回响应，根据响应结果，分析是否登录成功；
						console.log(JSON.stringify(result));
						if(result.ResultType != 0){
							mui.toast(result.Content);
							return;
						}
						var appendData = JSON.parse(result.AppendData);
						vm.item = appendData.data;
						vm.chapterKeys = appendData.keys;
					},
					error:function(xhr,type,errorThrown){
						plus.nativeUI.closeWaiting();
						//异常处理；
						console.log(type);
						mui.toast("读取数据异常！");
					}
				});
				
				//预加载详情页
				webview_detail = mui.preload({
					id: 'fileRead',
					url: 'fileRead.html',
				});
			});
			function openChapter() {
				/*保存更新用户阅读文档信息*/
				var doc = app.getDocument(vm.item.Id);
				if(doc == undefined){
					doc = {Id:vm.item.Id,Title:vm.item.Title,ChapterKeys:vm.chapterKeys,ReadIndex:0};
				}
				else{
					doc.Title = vm.item.Title;
					doc.ChapterKeys = vm.chapterKeys;
				}
				if(doc.ReadIndex == undefined)
					doc.ReadIndex = 0;	
				app.addDocument(vm.item.Id,doc);
				console.log("doc="+JSON.stringify(doc));
				//触发子窗口变更新闻详情
				mui.fire(webview_detail, 'get_detail', {
					keyValue: vm.item.Id,readIndex:doc.ReadIndex
				});
				setTimeout(function() {
					webview_detail.show("slide-in-right", 300);
				}, 150);
			}
		</script>
	</body>

</html>